<template>
	<view class="quality-recommend" :style="viewColor">
		<view class="quality_header">
			<view class="slider-banner swiper">
				<view class="swiper">
					<swiper indicator-dots="true" :autoplay="autoplay" :interval="interval" :duration="duration"
						indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
						<block v-for="(item,index) in imgUrls" :key="index">
							<swiper-item>
								<image :src="item.pic" class="slide-image" @click="goUrl(item.url)"></image>
							</swiper-item>
						</block>
					</swiper>
				</view>
			</view>
		</view>
		<view class="recommend_count">
			<view class="title acea-row">
				<view class="name"> {{ name }}</view>
				<text>{{ desc }}</text>
			</view>
			<view class="recommend_goods">
				<block v-for="(item,index) in recommendList" :key="index" v-if="index < 3">
					<view class="list" @click="goDetail(item)">
						<view class="picture">
							<image :src="item.image"></image>
						</view>
						<view class="name line1">{{item.store_name}}</view>
					</view>
				</block>
			</view>
		</view>
		<view class="wrapper">
			<GoodList :bastList="goodsList" :is-sort="false" :isLogin='isLogin'></GoodList>
			<view class="txt-bar" v-if="goodsList.length>0 && !isScroll">我是有底线的~</view>
		</view>
	</view>
</template>
<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import emptyPage from '@/pages/extend/components/emptyPage.vue'
	import GoodList from "@/pages/extend/components/goodList";
	import {
		getIndexData
	} from '@/api/api.js';
	import {
		getGroomList,
		getHotBanner
	} from "@/api/store";
	import {
		goShopDetail
	} from '@/libs/order.js'
	import {
		initiateAssistApi
	} from '@/api/activity.js';
	import util from "@/utils/util";
	import {
		mapGetters
	} from "vuex";
	import {
		toLogin
	} from '@/libs/login.js';

	const typeData = {
		best: {
			desc: '新品抢先购',
			name: '精品推荐'
		},
		hot: {
			desc: '剁手必备指南',
			name: '热门榜单'
		},
		new: {
			desc: '发现品质好物',
			name: '首发新品'
		},
		good: {
			desc: '惊喜折扣价',
			name: '推荐单品'
		},
	}

	export default {
		computed: mapGetters(['isLogin', 'uid', 'viewColor']),
		name: "HotNewGoods",
		components: {
			GoodList,
			emptyPage,
		},
		props: {},
		data: function() {
			return {
				imgUrls: [],
				goodsList: [],
				recommendList: [],
				name: "",
				hotData: [],
				loaded: false,
				desc: "",
				type: 0,
				autoplay: true,
				circular: false,
				interval: 3000,
				duration: 500,
				page: 1,
				limit: 8,
				isScroll: true,
			};
		},
		/**
		 * 用户点击右上角分享
		 */
		// #ifdef MP
		onShareAppMessage: function() {
			let that = this;
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			return {
				title: that.name || '',
				path: 'pages/columnGoods/HotNewGoods/index?type=' + that.type,
			}
		},
		onShareTimeline: function() {
			let that = this;
			return {
				title: that.name || '',
				query: {
					type: that.type
				},
				imageUrl: ''
			}
		},
		// #endif
		onLoad: function(option) {
			this.type = option.type
			this.getIndexGroomList();
			this.getHotBanner();
			getIndexData().then(res => {
				this.hotData = res.data.hot;
			}).finally(e => {
				this.loaded = true;
				this.titleInfo();
			});
		},
		watch: {
			name(n) {
				uni.setNavigationBarTitle({
					title: n || '加载中'
				})
			}
		},
		methods: {
			goUrl(url) {
				this.$util.JumpPath(url);
			},
			titleInfo: function() {
				if (!this.loaded) {
					this.name = '';
					this.desc = '';
				} else {
					let name = (typeData[this.type] || {}).name || '精品推荐';
					let url = this.$route ? this.$route.fullPath : ('/' + util.getNowUrl());
					this.hotData.forEach(data => {
						if (data.url == url) name = data.title;
					})
					this.name = name;
					this.desc = (typeData[this.type] || {}).desc || '新品抢先购';
				}
			},
			getIndexGroomList: function() {
				if (!this.isScroll) return
				let that = this;
				let type = this.type;
				getGroomList(type, {
						page: this.page,
						limit: this.limit
					}).then(res => {
						that.goodsList = that.goodsList.concat(res.data.list);
						if (this.page == 1) that.recommendList = that.goodsList.splice(0, 3);
						that.isScroll = res.data.list.length >= that.limit
						that.page++
					})
					.catch(function(res) {
						that.$util.Tips({
							title: res
						});
					});
			},
			getHotBanner() {
				let that = this
				getHotBanner(this.type).then(res => {
					that.imgUrls = res.data;
				})
			},
			goDetail(item) {
				goShopDetail(item, this.uid).then(res => {
					if (this.isLogin) {
						initiateAssistApi(item.activity_id).then(res => {
							let id = res.data.product_assist_set_id;
							uni.hideLoading();
							uni.navigateTo({
								url: '/pages/activity/assist_detail/index?id=' + id
							});
						}).catch((err) => {
							uni.showToast({
								title: err,
								icon: 'none'
							})
						});
					} else {
						toLogin()
					}
				})
			}
		},
		onReachBottom() {
			this.getIndexGroomList()
		}
	};
</script>
<style lang="scss">
	/deep/ .empty-box {
		background-color: #f5f5f5;
	}

	.quality_header {
		position: relative;
		padding: 30rpx 20rpx 0;

		&::before {
			content: "";
			display: block;
			width: 100%;
			height: 180rpx;
			background: var(--view-theme);
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 0 0 20rpx 20rpx;
			z-index: 0;
		}
	}

	.swiper,
	swiper,
	swiper-item,
	.slide-image {
		width: 100%;
		height: 300rpx;
		border-radius: 16rpx;
		z-index: 20;
	}

	/deep/.swiper .uni-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		border-radius: 100%;
		background-color: rgba(0, 0, 0, .3) !important;
	}

	/deep/.swiper .uni-swiper-dot-active {
		width: 18rpx;
		background-color: #E93323 !important;
		border-radius: 4rpx;
		margin-top: -4rpx;
	}

	.quality-recommend {
		background: #F5F5F5;
	}

	.recommend_goods {
		padding: 30rpx 0;
		display: flex;

		.list {
			width: 210rpx;
			margin-right: 20rpx;

			&:last-child {
				margin-right: 0;
			}

			.picture,
			image {
				width: 210rpx;
				height: 210rpx;
				border-radius: 16rpx;
			}

			.name {
				font-size: 26rpx;
				color: #282828;
				margin-top: 14rpx;
				padding: 0 4rpx;
			}
		}
	}

	.recommend_count {
		min-height: 416rpx;
		background-size: 100%;
		background-color: #fff;
		background-repeat: no-repeat;
		margin: 30rpx auto 0;
		width: 710rpx;
		padding: 0 20rpx;
		border-radius: 16rpx;
		background-image: url('');

		.title {
			padding: 20rpx 0;
			align-items: flex-end;

			.name {
				font-size: 32rpx;
				color: #282828;
				font-weight: bold;
				margin-right: 20rpx;
			}

			text {
				font-size: 24rpx;
				color: #666666;
			}


		}
	}

	.wrapper {
		margin-top: 30rpx;
		padding: 0 20rpx;
	}

	.txt-bar {
		padding: 20rpx 0;
		text-align: center;
		font-size: 26rpx;
		color: #666;
		background-color: #f5f5f5;
	}
</style>